<template>
	<view>
		<custom-navigation-bar title="评论管理"></custom-navigation-bar>
		<view style="height: 160rpx;float: left;width: 100%;"></view>
		<view v-if="data.length>0">
			<view class="goods_pl_1" v-for="(item,index) in data" :key="index">
				<view class="goods_pl_2" style="text-align: center;">
					{{item.name}}
				</view>
				<view class="goods_pl_2">
					用户：{{item.userPhone}}<label class="goods_pl_21">{{item.createTime}}</label>
				</view>
				<view class="goods_pl_3">
					<image v-for="(o,index1) in item.score" :key="index1" src="../../static/ic_xing@3x(1).png" style="width: 20rpx;height:20rpx;margin-left: 5rpx;"></image>
					<lable style="color: #cccccc;font-size: 25rpx;">{{item.score}}分</lable>
				</view>
				<view class="goods_pl_3">
					{{item.content}}
				</view>
				<view class="goods_pl_4"> 
					<image v-for="(item1,index1) in item.images" :key="index1" :src="item1" class="goods_pl_41" @click="previewImage(item1,item.images)"></image> 
				</view>
				<view v-for="(item1,index1) in item.orderCommentList" :key="index1" style="float: left;width: 90%;margin-left: 10%;">
					<view class="goods_pl_2" v-if="item1.shopId !=null">
						用户：{{item1.phone}}<label class="goods_pl_21">{{item1.createTime}}</label>
					</view>
					<view class="goods_pl_2" v-if="item1.shopId ==null">
						我<label class="goods_pl_21">{{item1.createTime}}</label>
					</view>
					<view class="goods_pl_3">
						{{item1.content}}
					</view>
				</view>
				<view class="goods_pl_3">
					 <view @click="back(item)" style="margin-bottom: 20rpx;width: 100rpx;height: 40rpx;line-height: 40rpx; float: left;margin-left: 60rpx;text-align: center;background: #cccccc;color: white;">回复</view>
				</view> 
			</view>
			<view class="more" v-if="pageData.more" @click="getMore()">
			     加载更多
			</view>
			<view class="more" v-if="!pageData.more">
			     无更多数据
			</view>
		</view>
		<view class="more" v-if="data.length==0">
		     暂无数据
		</view>
	</view>
</template>

<script setup> 
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../../utils/http';  
	import {
		onLoad,onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	const userId=ref();
	onLoad((query) => {
		userId.value=getApp().globalData.shopUserId;
		initData();
	}) 
	
	function back(item){
		uni.showModal({
		    title: '输入回复内容',
		    editable: true,
		    success: function (res) {
		        if (res.confirm) {
		            console.log('用户输入的内容:', res.content); 
					if(res.content==''){
						uni.showToast({
							icon: 'error',
							title: '请输入内容'
						})
						return;
					} 
					uni.showLoading({
						title: '数据加载中',
						mask:true
					});  
					http.request({
					 	url: "/shop/comment/back",
					 	method: "POST",
					 	data: { 
							userId:userId.value,
							id:item.id,
							orderComment:{ 
								content:res.content
							}
						}
					}).then((responseData) => { 
						uni.hideLoading();
						console.log(responseData)
						if(responseData.code==1){
							uni.showToast({
								icon: 'error',
								title: '成功'
							}) 
							initData();  
						}else if(responseData.code==0){
							uni.showToast({
								icon: 'error',
								title: responseData.message
							})
						}else if(responseData.code==-1){
							uni.navigateTo({
								url: "/pages/login/login"
							});
						}
					}).catch((err) => {
						uni.hideLoading();
					 	uni.showToast({
					 		icon: 'error',
					 		title: '请求失败'
					 	})
					}) 
		        } else if (res.cancel) {
		            console.log('用户点击取消');
		        }
		    }
		});
	}
	function previewImage(image,imageArr) {
		console.log("1111111")
		wx.previewImage({
			current: image, // 当前显示的图片链接
			urls: imageArr,
			success: function(res) {
				// 预览成功的回调函数
			},
			fail: function(err) {
				// 预览失败的回调函数
			}
		});
	}
	const data=ref([]);
	const pageData=ref(
		{
			pageIndex:1,
			pageSize:5,
			more:true
		}
	);
	function getMore(){
		pageData.value.pageIndex=pageData.value.pageIndex+1;
		initData();
	}
	function initData(){
		uni.showLoading({
			title: '数据加载中',
			mask:true
		}); 
		http.request({
		 	url: "/shop/comment/list",
		 	method: "POST",
		 	data: { 
				pageIndex:pageData.value.pageIndex,
				pageSize:pageData.value.pageSize,
				userId:userId.value,
				orderComment:{
					//goodsId:id.value
				}
		 	}
		}).then((responseData) => { 
			console.log(responseData)
			uni.hideLoading();
			if(responseData.code==1){ 
				 for(var i=0;i<responseData.data.length;i++){
					 responseData.data[i].images=JSON.parse(responseData.data[i].images);
				 }
				if(pageData.value.pageIndex==1){
					data.value=responseData.data;
				}else{
					if(responseData.data.length==0){
						pageData.value.more=false;
					}else{
						for(var i=0;i<responseData.data.length;i++){
							data.value.push(responseData.data[i])
						} 
					}
				}
			}else if(responseData.code==0){
				uni.showToast({
					icon: 'error',
					title: responseData.message
				})
			}else if(responseData.code==-1){
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		}).catch((err) => {
			uni.hideLoading();
		 	uni.showToast({
		 		icon: 'error',
		 		title: '请求失败'
		 	})
		})
	}
</script>

<style>
	@import "../../activity/detail.scss";
	Page{
		background-color: #F2F2F2;
		font-size: 30rpx;
	}
	.goods_pl_41{
		width: 120rpx;height: 120rpx;float: left;margin-left: 10rpx;
	}
	.goods_pl_4{
		width: 94%;margin-left: 3%;float: left;height: auto;margin-bottom: 20rpx;margin-top: 10rpx;
	}
	.goods_pl_3{
		width: 94%;margin-left: 3%;float: left;height: auto;
	}
	.goods_pl_21{
		float: right;color: #cccccc;font-size: 22rpx;
	}
	.goods_pl_2{
		width: 94%;margin-left: 3%;float: left;height: 50rpx;line-height: 50rpx;color: #cccccc;font-size: 22rpx;
	}
	.goods_pl_1{
		width: 94%;float: left;height:auto;margin-left: 3%;border-radius: 24rpx;background-color: white;margin-top: 20rpx;padding-top: 20rpx;
	}
	.goods_005{
		width: 84%;height: 220rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 25rpx;
	}
	.goods_004{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_00_p3{
		width: auto;border: red 3rpx solid;margin-left: 20rpx;padding-left: 10rpx;padding-right: 10rpx;padding-top: 2rpx;padding-bottom: 2rpx; border-radius: 15rpx;color: red;
	}
	.goods_00_p1{
		color: #cccccc;text-decoration: line-through
	}
	.goods_00_p{
		color: red;font-size: 34rpx;margin-right: 20rpx;
	}
	.goods_00_4{
		width: 94%;height: auto;float: left;margin-left: 3%;line-height: 25rpx;font-size: 22rpx;line-height: 50rpx;color: #cccccc;
	}
	.goods_00_3{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;margin-top: 10rpx;
	}
	.goods_00_2{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;
	}
	.goods_00_1{
		width: 94%;height: 60rpx;float: left;margin-left: 3%;line-height: 60rpx;
	}
	.menu_box{
		height:70rpx;background: white;width: 94%;margin-left: 3%;border-radius: 20rpx;float: left;margin-top: 20rpx;line-height: 70rpx;
	}
	.menu_se{
		width: auto;margin-left:3%;color: #2AE8DC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.menu_def{
		width: auto;margin-left:3%;color: #CCCCCC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.goods_001{
		width: 90%;height: 35rpx;float: left;margin-left: 5%;line-height: 35rpx;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 30rpx;text-align: center;
	}
	.goods_002{
		width: 84%;height: 35rpx;float: left;margin-left: 8%;line-height: 35rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 28rpx;
	}
	.goods_003{
		width: 84%;line-height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 28rpx;
	}
	.goods_002_1{
		float: left;margin-top: -2rpx;
	}
	.goods_003_1{
		float: left;margin-top: -2rpx;
	}
	.more{
			 width: 100%;text-align: center;line-height: 50rpx;color: #666666;font-size: 25rpx;float: left;margin-top: 10rpx;
	}
</style>